<div class="cil__new-page">
  <app-process-bar [width]="percent"></app-process-bar>
  <div class="cil__edit-block">
    <div nz-row nzType="flex" nzJustify="space-between" nzAlign="middle">
      <i class="cil__left-right--icon" nz-icon [nzIconfont]="index === 0 ? 'icon-left-disable' : 'icon-left'"
        (click)="goBack()"></i>
      <span class="title">{{componentRef.instance.data.title | i18n}}</span>
      <i class="cil__left-right--icon" nz-icon [nzIconfont]="index === length-1 ? 'icon-right-disable' : 'icon-right'"
        (click)="goNext()"></i>
    </div>

    <div nz-row nzType="flex" nzAlign="middle" nzJustify="center">
      <div class="page-num" nz-col>{{index + 1}}/{{pages.length}}</div>
    </div>

    <div class="cil__edit-content">
      <!--
        <ng-container *ngTemplateOutlet="page.template"></ng-container>
        -->
      <ng-template appNewContent></ng-template>
    </div>

    <div nz-row nzType="flex" nzJustify="center">
      <button
        *ngIf="index === 0"
        class="cil__custom-btn__whiteblue"
        nz-col
        nz-button
        (click)="goLeave()"
        nzShape="round">{{'BTN.CANCEL' | i18n}}</button>
      <button
        *ngIf="index !== 0"
        class="cil__custom-btn__whiteblue"
        nz-col
        nz-button
        (click)="goBack()"
        nzShape="round">{{'BTN.PRE_STEP' | i18n}}</button>
      <button
        *ngIf="index !== length - 1"
        class="cil__custom-btn__lightblue"
        nz-col
        nz-button
        (click)="goNext()"
        nzShape="round">{{'BTN.NEXT_STEP' | i18n}}</button>
      <button
        *ngIf="index === length - 1"
        nz-col
        nz-button
        nzShape="round"
        nzType="primary"
        appDebounceClick
        (debounceClick)="goSubmit()">{{'BTN.SUBMIT' | i18n}}</button>
    </div>
  </div>
</div>
